import React, { useState } from "react";
import { Input } from "antd-mobile";
import { v4 as uuidv4 } from "uuid";
import {  NavBar } from "react-vant";
import { useNavigate } from "react-router-dom";
type itemType = {
  id?: string;
  content?: string;
  time?: number;
  from?: string;
  to?: string;
  fromAvatar?: any;
  toAvatar?: any;
};

const style = require("./css/Message.module.css").default;
const customerAvatar = require("../../assets/images/customer.png");
const staffAvatar = require("../../assets/images/head-img.png");
const Message = () => {
  const [value, setValue] = useState<string>("");
  const [messageList, setMessageList] = useState<Array<itemType>>([
    {
      id: "1",
      from: "customer",
      to: localStorage.getItem("username") as string,
      content: "很高兴为您服务，请问有什么可以帮助您的？",
      time: +new Date(),
      fromAvatar: customerAvatar,
      toAvatar: customerAvatar,
    },
  ]);
  const socket = new WebSocket("ws://localhost:23456");
  const send = () => {
    const message: itemType = {
      id: uuidv4(),
      from: localStorage.getItem("username") as string,
      to: "customer",
      content: value,
      time: +new Date(),
      fromAvatar: staffAvatar,
      toAvatar: staffAvatar,
    };
    messageList.push(message);
    setMessageList([...messageList]);
    socket.send(JSON.stringify(message));
    setValue("");
  };
  socket.onmessage = async (e) => {
    let message = JSON.parse(e.data);
    message.fromAvatar = customerAvatar;
    message.toAvatar = customerAvatar;
    messageList.push(message);
    setMessageList([...messageList]);
  };

  const navigate = useNavigate();
  return (
    <>
      <div>
        <NavBar title="在线咨询" onClickLeft={() => navigate(-1)} />
      </div>
      <div className={style["message-box"]}>
        <div className={style["messages"]}>
          {messageList.map((item) => {
            return (
              <div
                key={item.id}
                style={{
                  flexDirection:
                    item.from === localStorage.getItem("username")
                      ? "row-reverse"
                      : "row",
                  marginLeft:
                    item.from === localStorage.getItem("username")
                      ? "40px"
                      : "10px",
                  marginRight:
                    item.from !== localStorage.getItem("username")
                      ? "40px"
                      : "10px",
                }}
              >
                <img src={item.fromAvatar} alt="" />
                <div>{item.content}</div>
              </div>
            );
          })}
        </div>
      </div>
      <div className={style["send-box"]}>
        <Input
          className={style["input"]}
          placeholder="请输入内容"
          value={value}
          onChange={(val) => {
            setValue(val);
          }}
        />
        <div className={style["img"]}>图片</div>
        <div className={style["bq"]}>☺</div>
        <div className={style["send-btn"]} onClick={send}>
          发送
        </div>
      </div>
    </>
  );
};

export default Message;
